<template>
  <div class="home">
    <div class="content">
      <!-- 左侧 -->
      <div class="lfv">
        <!--<left-content :content="content"></left-content>-->
        <div>
          <div class="modtit">
            <span class="tit">Samples</span>
          </div>
          <div class="fir" v-for="(item,index) in content.samp" :key="index">
            <div class="lfc" @click="switchContext()">{{ item.name}}</div>
            <div class="rgc">{{ item.content }}</div>
          </div>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="rgv">
        <div>
          <div class="modtit">
            <span class="tit">about us</span>
          </div>
          <div class="cont">
            <!-- <div style="word-break: break-all" v-html="content.rgtit"></div> -->
            <div v-if="homeShow" class="cttit">
              1111
            </div>
            <div v-if="listShow" class="cttit">
              <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                  prop="id"
                  label="id"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="type"
                  label="type"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="title"
                  label="title">
                </el-table-column>
              </el-table>
            </div>
            <!-- <div v-else-if="type == 'news'" class="cttit">
                {{ content.rgtit }}
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 下侧 -->
    <div class="btv">
      <bottom-content :content="content"></bottom-content>
    </div>
  </div>
</template>
<script>
  import LeftContent from './leftContent.vue';
  import RightContent from './rightContent.vue';
  import BottomContent from './bottomContent.vue';

  export default {
    components: {
      LeftContent,
      RightContent,
      BottomContent
    },
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        homeShow: true,
        listShow: false,
        content: {
          type: "home",
          samp: [
            {
              name: 'china1',
              content: 'xxxxxxxxxx'
            },
            {
              name: 'china2',
              content: 'xxxxxxxxxx'
            },
            {
              name: 'china3',
              content: 'xxxxxxxxxx'
            },
            {
              name: 'china4',
              content: 'xxxxxxxxxx'
            }
          ],
          make: [
            {
              name: 'china',
              content: 'xxxxxxxxxx'
            },
            {
              name: 'china',
              content: 'xxxxxxxxxx'
            }
          ],
          rgtit: '123'
        }
      };
    },
    beforeUpdate() {
    },
    mounted() {
      this.$api.homeApi.getNoteList({page: 1, limit: 20}).then((res) => {
        console.log("res", res)
        this.content.rgtit = '123123';
        this.tableData = res.data.page.list

      })
    },
    methods: {
      switchContext() {
        console.log("switch")
        if (this.homeShow) {
          console.log("switch homeShow")
          this.homeShow = false;
          this.listShow = true;
          console.log("homeShow", this.homeShow)
        } else {
          this.homeShow = true;
          this.listShow = false;
        }
        console.log("homeShow", this.homeShow)
        console.log("listShow", this.listShow)

      }
    }
  }
</script>
<style scoped>
  .home {
    width: 980px;
    margin: 20px auto;
    background: white;
    padding: 10px;
    box-sizing: border-box;
  }

  .content {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .lfv {
    width: 30%;
  }

  .rgv {
    width: 70%;
    padding-left: 10px;
    box-sizing: border-box;
    border-left: 1px dashed #D7D7D7;
  }

  .btv {
    padding: 10px;
    box-sizing: border-box;
  }

  .fir {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    /* overflow: hidden; */
    padding: 16px 4px;
    box-sizing: border-box;
    line-height: 26px;
  }

  .modtit {
    height: 30px;
    overflow: hidden;
  }

  .tit {
    font-size: 14px;
  }

  .lfc {
    width: 50px;
  }

  .rgc {
    margin-left: 30px;
    width: 140px;
    overflow: hidden;
  }
</style>
